<template>
    <div>
         <!-- <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in 6" :key="item">
                关注的主办方的活动
            </el-carousel-item>
        </el-carousel> -->

        <!-- <div>
            一些筛选标签
        </div> -->

        <div>
            <el-row>
                <el-col :span="8" v-for="(e, eIndex) in eventList" :key="eIndex">
                    <el-card class="event-card" :body-style="{ padding: '0px' }" shadow="hover">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" @click="showEvent(e)">
                        <div style="padding: 14px;">
                            <div class="event-name" @click="showEvent(e)">
                                <b>{{e.title}}</b>
                            </div> 
                            <el-row>
                                <h3 class="event-status">{{e.status}}</h3>
                            </el-row>
                            <el-row>
                                主办方：{{e.organizer_name}}
                            </el-row>
                            <el-row>
                                时间：{{e.start_time}} 至 {{e.end_time}}
                            </el-row>
                            <el-row>
                                地点：{{e.location}}
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            eventList: [],
            
        }
    },
    created() {
        this.getAllEvents();
    },
    computed: {
        ...mapGetters([
            'userId',
            'username',
            'address',
        ]),
    },
    methods: {
        showEvent(event) {
            this.$router.push({
                name: "event", 
                params: event
            });
        },
        getAllEvents() {
            this.api({
                url:"/event/getAllEvents",
                method: "get",
            }).then(data => {
                this.eventList = data.info;

                let now = Date.now();
                for (let i = 0; i < this.eventList.length; i++) {
                    let startTime = new Date(this.eventList[i].start_time).getTime();
                    let endTime = new Date(this.eventList[i].start_time).getTime();
                    if (now < startTime) {
                        this.eventList[i].status = '未开始';
                    } else if (now < endTime) {
                        this.eventList[i].status = '正在进行';
                    } else {
                        this.eventList[i].status = '已结束';
                    }
                }
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("获取活动失败")
            })
        }
    },
}
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item {
    background-color: #99a9bf;
}

.event-card {
    width: 300px;
}

.image {
    width: 100%;
    display: block;
    cursor: pointer;
}

.event-name {
    font-size: 25px;
    color: black;
    cursor: pointer;
}

.event-status {
    font-size: 18px;
    color: #E6A23C;
}
</style>